<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试ajax传参</title>
    <!-- 引入jquery   -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 定义方法 -->
    <script>
        // 封装成方法，重复调用
        /**
         * jquery方式获取多个复选框选中的值
         * @param selecterStrOfParentJQuery 要获取复选框值的父级选择器，需要将复选框称为父元素的子元素,checkbox元素的name需要设置成check
         * @param nameOfCheckboxStr 子元素checkbox的的name属性值
         * @returns {unknown[]|{message: string}} 多个复选框值得JavaScript数组或空数组，若不传入选择器和复选框的name属性值，则返回错误信息的javascript对象
         */
        function getCheckboxsValuesOf(selecterStrOfParentJQuery, nameOfCheckboxStr) {

            if (!selecterStrOfParentJQuery) {
                return {message: "请输入正确的jquery选择器！"}
            } else {
                return Array.from($(selecterStrOfParentJQuery).find("input[name='" + nameOfCheckboxStr + "']").filter(function (index, item) {

                    console.log(index);
                    var checked = $(item).prop("checked");
                    console.log("item.prop('checked')的值是：" + checked);
                    return checked;
                }).map(function (index, item) {
                    var value_checkbox = $(item).val();
                    console.log(value_checkbox);
                    return value_checkbox;
                }));
            }

        }


    </script>
    <script>
        $(function () {

            //为全选复选框添加事件
            $("#check_all").on("click", function () {
                console.log("目标是全选");
                // 获取当前复选框的状态,得到的是true或false
                var check_flag = $(this).prop("checked");

                console.log("选择状态是：" + check_flag);
                // 获取当前复选框的值是,当复选框没有value属性赋值时，得到的是on,有赋值时，得到的是value的属性值
                var value_check_this = $(this).val();
                console.log("value_check_this的值是：" + value_check_this);

                //根据复选框是否选择作出不同操作
                if (check_flag) {
                    //全选操作实现
                    // 方式一：
                    // $("#checkbox_grouptest").find("input[name='arrayCheck']").map(function (index, item) {
                    //
                    //     $(item).prop('checked', true);
                    //
                    // });

                    //方式二：
                    $("#checkbox_grouptest").find("input[name='arrayCheck']").prop("checked", true);

                } else {
                    // 方式一：
                    // $("#checkbox_grouptest").find("input[name='arrayCheck']").map(function (index, item) {
                    //
                    //     $(item).prop('checked', true);
                    //
                    // });

                    // 方式二：
                    //取消操作实现
                    $("#checkbox_grouptest").find("input[name='arrayCheck']").prop("checked", false);

                }


                // dom方式获取值,测试获取值
                // console.log("复选框1的状态是："+checkboxGrouptest[0].checked);
                // console.log("复选框1的值是："+checkboxGrouptest[0].value);


                // 链式调用获取多个复选框的值。
                // 1.链式调用得到jquery类型的数组
                // var checkboxids = $("#checkbox_grouptest input[name='check']").filter(function (index, item) {
                //     var checked = $(item).prop("checked");
                //     console.log("item.prop(\"checked\")的值是：" + checked);
                //     return checked;
                // }).map(function (index, item) {
                //     var value_checkbox=$(item).val();
                //     console.log(value_checkbox);
                //     return value_checkbox;
                // });
                //
                // // 2.将jquery类型数组转为javaScript类型数组
                // var ids_array = Array.from(checkboxids);
                //
                // console.log(ids_array);


                // var ids_arr= Array.from($("#checkbox_grouptest input[name='check']").filter(function (index, item) {
                //         var checked = $(item).prop("checked");
                //         console.log("item.prop(\"checked\")的值是：" + checked);
                //         return checked;
                //     }).map(function (index, item) {
                //         var value_checkbox=$(item).val();
                //         console.log(value_checkbox);
                //         return value_checkbox;
                //     }));
                //
                // console.log("ids_arr:"+ids_arr);
                //     console.log(ids_arr);


                // 查看获取的多个复选框的值，是javascript数组
                console.log(getCheckboxsValuesOf("#checkbox_grouptest", "arrayCheck"));


                // 分步骤获取多个复选框的值。分解链式调用
                // 1.拿到目标的复选框
                // var checkboxGrouptest = $("#checkbox_grouptest input[name='check']");
                // console.log("checkboxGrouptest是：")
                // console.log(checkboxGrouptest);
                // // 2.过滤筛选选中的复选框
                // var a = checkboxGrouptest.filter(function (index, item) {
                //     var checked = $(item).prop("checked");
                //     console.log("item.prop(\"checked\")的值是：" + checked);
                //     return checked;
                // });
                // console.log("a是：");
                // console.log(a);
                //
                //
                // // 3.从过滤筛选出的复选框中获取选中的复选框的值的jquery类数组
                // var ids = a.map(function (index, item) {
                //     console.log("index是：" + index);
                //     console.log("item是：" + item);
                //     console.log("tiem.value是：" + item.value);
                //     return item.value;
                // });
                // console.log("新的checkboxGrouptest是：");
                // console.log(ids);
                //
                // // 4从jquery数据对象转换成javaScript类型数组
                // // 4.1：方式一从jquery数据对象转换成javaScript类型数组，（推荐）
                // let from = Array.from(ids);
                // console.log(from);
                // // 4.2 方式二从jquery数据对象转换成javaScript类型数组，
                // var call_arr = [].slice.call(ids);
                // console.log(call_arr);
                //
                // // 4.3 方式三,不推荐
                // var testarr = [];
                // ids.map(function (index, item) {
                //     console.log("test:" + item);
                //     testarr[index] = item;
                // });
                //
                // console.log(testarr);

            });
        });

        $(function () {

            // 给反选复选框添加事件
            $("#check_checkedOfDifferent").on('click', function () {
                // 获取反选框的状态
                var checked_flag = $(this).prop("checked");
                console.log("反选框的状态是:" + checked_flag);
                // 实现反选操作
                if (checked_flag) {
                    $("#checkbox_grouptest").find("input[name='arrayCheck']").map((index, item) => {
                        // 目标复选框的状态
                        checkbox_this_flag = $(item).prop("checked");
                        if (checkbox_this_flag) {
                            $(item).prop("checked", false);
                        } else {
                            $(item).prop("checked", true);
                        }

                    });

                } else {

                    // 如果是按钮则放开这一段
                    // $("#checkbox_grouptest").find("input[name='arrayCheck']").map((index,item)=>{
                    //     // 目标复选框的状态
                    //     checkbox_this_flag=   $(item).prop("checked");
                    //     if (checkbox_this_flag){
                    //         $(item).prop("checked",false);
                    //     }else{
                    //         $(item).prop("checked",true);
                    //     }
                    //
                    // });
                }

                // 查看获取的多个复选框的值，是javascript数组
                console.log(getCheckboxsValuesOf("#checkbox_grouptest", "arrayCheck"));

            });

            // 为多个复选框添加实现，实现全部选中时，全选按钮选中
            // 实现方式一：
            // var checkboxs = $("#checkbox_grouptest").find("input[name='arrayCheck']");
            // console.log(checkboxs);
            //
            // checkboxs.on('click', function () {
            //     console.log("复选框组点击事件：");
            //
            //     var length_checkboxs=checkboxs.length;
            //     console.log("目标复选框个数是："+length_checkboxs);
            //     var length_checkeds=$("#checkbox_grouptest").find("input[name='arrayCheck']:checked").length;
            //     console.log("选中的复选框个数是："+length_checkeds);
            //     if (length_checkboxs==length_checkeds){
            //         console.log("全部选中！");
            //         $("#check_all").prop("checked",true);
            //     }else{
            //         console.log("取消全部选中！");
            //         $("#check_all").prop("checked",false);
            //     }
            //
            // });

            // 实现方式二：
            $("#checkbox_grouptest").on("click", "input[name='arrayCheck']", function () {
                console.log("复选框组点击事件：");

                var length_checkboxs = $("#checkbox_grouptest").find("input[name='arrayCheck']").length;
                console.log("目标复选框个数是：" + length_checkboxs);
                var length_checkeds = $("#checkbox_grouptest").find("input[name='arrayCheck']:checked").length;
                console.log("选中的复选框个数是：" + length_checkeds);

                if (length_checkboxs == length_checkeds) {
                    console.log("全部选中！");
                    $("#check_all").prop("checked", true);
                } else {
                    console.log("取消全部选中！");
                    $("#check_all").prop("checked", false);
                }

            });


        });
    </script>
</head>
<body>
测试ajax传参页面
<br>

<ul>
    <li>
        <button id="ajax_sendArray" type="button">从复选框中传递数组参数</button>
        <div id="checkbox_grouptest">
            <ul>
                <li>
                    <span>复选框操作：</span>
                    <input type="checkbox" id="check_all" value="0"> 全选
                    <input type="checkbox" id="check_checkedOfDifferent"> 反选
                </li>
                <li><input type="checkbox" checked name="arrayCheck" value="1">1</li>
                <li><input type="checkbox" value="2" name="arrayCheck">2</li>
                <li><input type="checkbox" value="3" name="arrayCheck">3</li>
                <li><input type="checkbox" value="4" name="arrayCheck">4</li>
            </ul>

        </div>
    </li>
    结果： <textarea name="sendArrayResult" id="sendArrayResult" cols="30" rows="10"></textarea>


    <li>
        <button id="ajax_sendObject">传递复杂javaScript对象参数</button>

        <div id="radio_test_person_sex">
            <input type="radio" name="sex" value="男"> 男
            <input type="radio" name="sex" value="女"> 女

            <p>选择的单选按钮是：<span id="radio_sex_value"></span></p>
            <label for="createTime_datetime-local">
                创建时间：（input的type="datetime-local"）
                <input type="datetime-local" id="createTime_datetime-local" name="createTime">
            </label>
            <label for="createTime_date">
                创建时间：（input的type="date"）
                <input type="date" id="createTime_date" name="createTime">
            </label>

            <button id="getTime" type="button">获取时间</button>
            <p>获取的本地时间是：<span id="time_datetime_local"></span></p>
            <p>获取的时间是：<span id="time_date"></span></p>

            <button type="button" id="submitTime">提交时间测试</button>
        </div>

    </li>
    结果：<textarea name="sendObjResult" id="sendObjResult" cols="30" rows="10"></textarea>
</ul>
<script>
    $(function () {
        //提交时间按钮添加事件
        $("#submitTime").click(function () {
            console.log("提交时间测试：");

            var gettime = $("#createTime_datetime-local").val();
            console.log("要提交的时间字符串格式是：" + gettime);
            console.log("字符串时间的类型是：" + (typeof gettime));
            console.log("字符串时间转换后的类型是：(Date.parse(gettime)" + typeof (Date.parse(gettime)));
            // 传给后端字符串格式时间
            var timeParam = gettime;//2022-03-24T00:03
            // 时间格式作处理，去除字符串格式中的T分隔符，保持数据绑定格式一致：yyyy-MM-dd HH:mm:ss
            timeParam = timeParam.replace(/T/g, ' ') + ':00';
            console.log("timeParam:" + timeParam);
            console.log("timeParam的长度:" + timeParam.length);

            // // 传给后端时间戳
            var timeParam = new Date(timeParam).getTime();
            console.log("转换后的时间戳是：" + timeParam);
            //
            // var localtime=new Date().toLocaleString();
            // console.log("localtime:"+localtime);
            // var time = timeParam;
            // console.log("time:"+time);

            timeParam = {
                localDateTime: timeParam,
                date: timeParam,
                localDateTime_timestamp: timeParam,
                localDate: timeParam,
                localTime: timeParam

            };


            //测试时间参数的传递与后端处理
            // url: /hrms/deptMoreCondition/timeTest
            $.ajax({
                url: "/hrms/deptMoreCondition/timeTest",
                // 测试 全局配置LocalDateTime转换器
                // url: "/hrms/deptMoreCondition/timeTest2",
                method: "post",
                // data: timeParam,
                // 给后端发送json字符串
                data: JSON.stringify(timeParam),
                contentType: "application/json;chartset=utf-8",
                traditional: true,
                dataType: "json",
                success: function (data) {
                    console.log("返回的数据是：");
                    console.log(data);
                    if (data.status == 200) {
                        console.log(data.data);
                        let message = data.message;
                        console.log(`返回的message是:${data.message}`);
                        $("#sendObjResult").text(data.data);

                        console.log(new Date(data.data.date).toLocaleString());

                    } else {
                        console.log(data.data);
                        console.log(data.message);
                        $("#sendObjResult").text(data.message);
                    }
                },
                error: function (error) {
                    console.log("发生错误：");
                    console.log(error.responseJSON);
                }
            });
        });


    });
</script>

<script>
    $(function () {
        // 获取单选按钮的值：
        $("#radio_test_person_sex").on("click", "input[name='sex']", function () {

            console.log("单选按钮事件：");
            console.log("单选按钮的值是：" + $(this).val());

            $("#radio_sex_value").text($(this).val());
        });

        $("#getTime").on('click', function () {
            $("#time_datetime_local").text($("#createTime_datetime-local").val());
            $("#time_date").text($("#createTime_date").val());
            // 获取时间的值
            console.log("获取的本地当前时间是：" + $("#createTime_datetime-local").val());
            console.log(typeof $("#createTime_datetime-local").val())
            console.log("获取的当前时间是：" + $("#createTime_date").val());
        });


    });
</script>
<script>

    $(function () {

        // 传递数组参数给后端
        $("#ajax_sendArray").click(function () {
            console.log("传递数组测试");


            // 方式一：data传入json对象如：{arrayParam: [1,2,3]},
            // 后端请求方法参数用json对象key对应的名称作为参数名，类型为String数组,
            // 这种情况下traditional必须设置为ture时后端才可以获取的值去处理

            console.log("要传递的参数是：")

            console.log(getCheckboxsValuesOf("#checkbox_grouptest", "arrayCheck"));

            $.ajax({
                url: '/hrms/deptMoreCondition/testArrayParam',
                method: 'post',
                // 这里arrayParam为变量是，变量值需要的是含有key为arrayParam的json对象，如：{arrayParam:[1,2,3]}
                // data: arrayParam,
                // 这里arrayParam为变量是，变量值需要的是json对象，如：{arrayParam},{}里面的变量是一个数组，这里是传数组测试，所以才是数组。
                // data: {arrayParam},

                // 从getCheckboxsValuesOf("#check_grouptest","arrayCheck")方法中得到选中的复选框的值。
                data: {arrayParam: getCheckboxsValuesOf("#checkbox_grouptest", "arrayCheck")},
                traditional: true,
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    $("#sendArrayResult").val(data.data);
                },
                error: function (err) {
                    // 请求路径或导致的错误
                    console.log(err);
                    alert("出现错误!\r\n错误消息是：" + err.responseText);

                }
            });


            // 方式二：利用JSON.stringify()传入json对象字符串,这种情况下contentType设置为： 'application/json;charset=utf-8',
            // 这种情况下后端必须用@RequestBody注解应用到请求方法的参数类型上，且请求参数为包含json字符串所表示的实体对象
            // 此种情况下无论traditional是否为true都后端可以正常处理

            // var arrayParam=JSON.stringify({
            //     arrayParam: [1, 2, 3]
            // });
            // console.log("要传递的参数是：")
            // console.log(arrayParam);
            // $.ajax({
            //     url: '/hrms/deptMoreCondition/testArrayParam2',
            //     method: 'post',
            //     data: arrayParam,
            //     // 方式一，传递json对象如：{arrayParam: [1, 2, 3]}，traditional设置为true
            //     // traditional: true,
            //     contentType: 'application/json;charset=utf-8',
            //     dataType: 'json',
            //     success: function (data) {
            //         console.log(data);
            //         $("#sendArrayResult").val(data.data);
            //     },
            //     error: function (err) {
            //         // 请求路径或导致的错误
            //         console.log(err);
            //         alert("出现错误!\r\n错误消息是：" + err.responseText);
            //
            //     }
            // });


            // 方式四：利用JSON.stringify()传入json对象字符串,这种情况下contentType设置为： 'application/json;charset=utf-8',
            // 这种情况下后端请求方法的参数类型设置HttpServletRequest,
            // 通过输入流（request获取的流）获取json对象的字符串，通过SpringMVC默认的ObjectMapper的readValue转换成java对象
            // 此种情况下无论traditional是否为true都后端可以正常处理
            // var arrayParam=JSON.stringify({
            //     arrayParam: [1, 2, 3]
            // });
            //
            // console.log("要传递的参数是：")
            // console.log(arrayParam);
            // $.ajax({
            //     url: '/hrms/deptMoreCondition/testArrayParam4',
            //     method: 'post',
            //     data: arrayParam,
            //     // 方式一，传递json对象如：{arrayParam: [1, 2, 3]}，traditional设置为true
            //     // traditional: true,
            //     contentType: 'application/json;charset=utf-8',
            //     dataType: 'json',
            //     success: function (data) {
            //         console.log(data);
            //         $("#sendArrayResult").val(data.data);
            //     },
            //     error: function (err) {
            //         // 请求路径或导致的错误
            //         console.log(err);
            //         alert("出现错误!\r\n错误消息是：" + err.responseText);
            //
            //     }
            // });

            // 方式三：data传入json对象如：{arrayParam: [1,2,3]},traditional是否为ture后端都可以获取到传递的值,
            // 后端用含有json对象key对应字段的实体对象接收，实体对象不用@QuestBody注解

            // var arrayParam={
            //     arrayParam: [1, 2, 3]
            // };
            // console.log("要传递的参数是：")
            // console.log(arrayParam);
            //
            // $.ajax({
            //     url: '/hrms/deptMoreCondition/testArrayParam3',
            //     method: 'post',
            //     data: arrayParam,
            //     // traditional: true,
            //     dataType: 'json',
            //     success: function (data) {
            //         console.log(data);
            //         $("#sendArrayResult").val(data.data);
            //     },
            //     error: function (err) {
            //         // 请求路径或导致的错误
            //         console.log(err);
            //         alert("出现错误!\r\n错误消息是：" + err.responseText);
            //
            //     }
            // });


        });

    });
</script>

<script>
    $(function () {

        var date = new Date();
        var datestr = date.toLocaleDateString();
       var timestr = date.toLocaleTimeString();

        console.log(datestr);
        console.log(timestr);

        var arrdate=datestr.split('/');
        console.log(arrdate);
       arrdate= arrdate.map(function (value,index,array){
            console.log(value);
            return value.padStart(2,'0');
        });
        console.log(arrdate);
        var str='';
        for (let string of arrdate) {
            str +=string+'-';
        }
        console.log(str);
        console.log(str.substring(0,str.length-1));
        str=str.substring(0,str.length-1);

       var localString= str+' '+timestr;
            console.log(localString);

           var t= new Date().toLocaleString().replaceAll(':','/').split(' ').map(function(value,index,array){
                return value.split('/');
            }).map(function (value,index,array){
             console.log(value);
             return value.map(function (value,index,array){
                  return value.padStart(2,'0');
               })
           });


        var localStr=`${t[0][0]}年${t[0][1]}月${t[0][2]}日 ${t[1][0]}时${t[1][1]}分${t[1][2]}秒`;
        console.log(localStr);
    });

</script>
</body>
</script>
</html>